<!DOCTYPE html>
<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/animations.css"/>
    <link rel="stylesheet" type="text/css" href="css/default.css"/>
    <link rel="stylesheet" type="text/css" href="css/default2.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>

    <title>测试</title>
    

</head>


<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
    
    <section class="hero" id="intro">
            <div class="container">
              <div class="row">
                <div class="col-md-12 text-right navicon">
                  <a id="nav-toggle" class="nav_slide_button" href="#"><span></span></a>
                </div>
              </div>
              <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center inner">
                    <div class="animatedParent">
                        <h1 class="animated fadeInDown go">MUSIM BOCOR</h1>
                        <p class="animated fadeInUp go">Udah dari dulu tahu kalo bocor kenapa nggak ditambal tong</p>
                    </div>
               </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                  <a href="#about" class="learn-more-btn btn-scroll">Learn more</a>
                </div>
              </div>
            </div>
    </section>
    
    
    <!-- Navigation -->
    <!--<div id="navigation-sticky-wrapper" class="sticky-wrapper" style="height: 97px;">-->
    <div id="navigation">
        <nav class="navbar navbar-custom" role="navigation">
                              <div class="container">
                                    <div class="row">
                                          <div class="col-md-2">
                                                   <div class="site-logo">
                                                            <a href="#" class="brand">
                                                                <img src="images/mylogo.png" alt="I" />
                                                            </a>
                                                    </div>
                                          </div>
                                          

                                          <div class="col-md-10">
                         
                                                      <!-- Brand and toggle get grouped for better mobile display -->
                                                      <div class="navbar-header">
                                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                                                               <i class="glyphicon glyphicon-align-justify"></i>
                                                            </button>  
                                                      </div>
                                                      <!-- Collect the nav links, forms, and other content for toggling -->
                                                      <div class="collapse navbar-collapse" id="menu">
                                                            <ul class="nav navbar-nav navbar-right">
                                                                  <li class="active"><a href="#intro">Home</a></li>
                                                                  <li class=""><a href="#about">About Us</a></li>
                                                                   <li class=""><a href="#service">Services</a></li>
                                                                  <li class=""><a href="#works">Works</a></li>                                                                                
                                                                  
                                                                  <li class=""><a href="#contact">Contact</a></li>
                                                            </ul>
                                                      </div>
                                                      <!-- /.Navbar-collapse -->
                             
                                          </div>
                                    </div>
                              </div>
                              <!-- /.container -->
                        </nav>
    </div>
    <!--</div>--> 
    <!-- /Navigation -->  

    <!-- Section: about -->
    <section id="about" class="home-section color-dark bg-white">
        <div class="container marginbot-50">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="animatedParent">
                    <div class="section-heading text-center animated bounceInDown go">
                    <h2 class="h-bold">About our bocor team</h2>
                    <div class="my_demo">
                    	<ul>
                    		<li><a href="myproduct/canvas/canvas.html" target="_blank">canvas学习制作实例</a></li>
                    	    <li><a href="private/info.php" target="_blank">查看个人信息</a></li>
                    	</ul>
                    </div>
                    <div class="divider-header"></div>
                    </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="container">

        
        <div class="row">
        
        
            <div class="col-lg-8 col-lg-offset-2 animatedParent"> 
                <div class="canvas_out" id="ccc0001">
                	<canvas id="scratch_card" width="100" height="100">
                	    
                	</canvas>
                </div>
                <div class="text-center">
                    <a href="#service" class="btn btn-skin btn-scroll">What we do</a>
                </div>
            </div>
        

        </div>      
        </div>

    </section>
    <!-- /Section: about -->
    
    
    <!-- Section: services -->
    <section id="service" class="home-section color-dark bg-gray">
        <div class="container marginbot-50">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div>
                    <div class="section-heading text-center">
                    <h2 class="h-bold">What we can do for you</h2>
                    <div class="divider-header"></div>
                    </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="text-center">
        <div class="container">

        <div class="row animatedParent">
            <div class="col-xs-6 col-sm-4 col-md-4">
                <div class="animated rotateInDownLeft">
                <div class="service-box">
                    <div class="service-icon">
                        <span class="fa fa-laptop fa-2x"></span> 
                    </div>
                    <div class="service-desc">                      
                        <h5>Web Design</h5>
                        <div class="divider-header"></div>
                        <p>
                        Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
                        </p>
                        <a href="#" class="btn btn-skin">Learn more</a>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
                <div class="animated rotateInDownLeft slow">
                <div class="service-box">
                    <div class="service-icon">
                        <span class="fa fa-camera fa-2x"></span> 
                    </div>
                    <div class="service-desc">
                        <h5>Photography</h5>
                        <div class="divider-header"></div>
                        <p>
                        Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
                        </p>
                        <a href="#" class="btn btn-skin">Learn more</a>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
                <div class="animated rotateInDownLeft slower">
                <div class="service-box">
                    <div class="service-icon">
                        <span class="fa fa-code fa-2x"></span> 
                    </div>
                    <div class="service-desc">
                        <h5>Graphic design</h5>
                        <div class="divider-header"></div>
                        <p>
                        Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
                        </p>
                        <a href="#" class="btn btn-skin">Learn more</a>
                    </div>
                </div>
                </div>
            </div>

        </div>      
        </div>
        </div>
    </section>
    <!-- / Section: services -->
    

    <!-- Section: works -->
    <section id="works" class="home-section color-dark text-center bg-white">
        <div class="container marginbot-50">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div>
                    <div class="animatedParent">
                    <div class="section-heading text-center">
                    <h2 class="h-bold animated bounceInDown">What we have done</h2>
                    <div class="divider-header"></div>
                    </div>
                    </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="container">

            <div class="row animatedParent">
                <div class="col-sm-12 col-md-12 col-lg-12">

                    <div class="row gallery-item">
                        <div class="col-md-3 animated fadeInUp">
                            <a href="images/1.jpg" title="This is an image title" data-lightbox-gallery="gallery1" data-lightbox-hidpi="img/works/1@2x.jpg">
                                <img src="images/1.jpg" class="img-responsive" alt="img">
                            </a>
                        </div>
                        <div class="col-md-3 animated fadeInUp slow">
                            <a href="images/2.jpg" title="This is an image title" data-lightbox-gallery="gallery1" data-lightbox-hidpi="img/works/1@2x.jpg">
                                <img src="images/2.jpg" class="img-responsive" alt="img">
                            </a>
                        </div>
                        <div class="col-md-3 animated fadeInUp slower">
                            <a href="images/3.jpg" title="This is an image title" data-lightbox-gallery="gallery1" data-lightbox-hidpi="img/works/1@2x.jpg">
                                <img src="images/3.jpg" class="img-responsive" alt="img">
                            </a>
                        </div>
                        <div class="col-md-3 animated fadeInUp">
                            <a href="images/4.jpg" title="This is an image title" data-lightbox-gallery="gallery1" data-lightbox-hidpi="img/works/1@2x.jpg">
                                <img src="images/4.jpg" class="img-responsive" alt="img">
                            </a>
                        </div>
                    </div>
    
                </div>
            </div>  
        </div>

    </section>
    <!-- /Section: works -->

    <!-- Section: contact -->
    <section id="contact" class="home-section nopadd-bot color-dark bg-gray text-center">
        <div class="container marginbot-50">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="animatedParent">
                    <div class="section-heading text-center">
                    <h2 class="h-bold animated bounceInDown">Get in touch with us</h2>
                    <div class="divider-header"></div>
                    </div>
                    </div>
                </div>
            </div>

        </div>
        
        <div class="container">

            <div class="row marginbot-80">
                <div class="col-md-8 col-md-offset-2">
                        <form id="contact-form">
                        <div class="row marginbot-20">
                            <div class="col-md-6 xs-marginbot-20">
                                <input type="text" class="form-control input-lg" id="name" placeholder="Enter name" required="required">
                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control input-lg" id="email" placeholder="Enter email" required="required">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                        <input type="text" class="form-control input-lg" id="subject" placeholder="Subject" required="required">
                                </div>
                                <div class="form-group">
                                    <textarea name="message" id="message" class="form-control" rows="4" cols="25" required="required" placeholder="Message"></textarea>
                                </div>                      
                                <button type="submit" class="btn btn-skin btn-lg btn-block" id="btnContactUs">
                                    Send Message</button>
                            </div>
                        </div>
                        </form>
                </div>
            </div>  


        </div>
    </section>
    <!-- /Section: contact -->


    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <ul class="footer-menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Press release</a></li>
                    </ul>
                </div>
                <div class="col-md-6 text-right">
                    <p>©Copyright 2014 - Bocor. Designed by <a href="http://bootstraptaste.com/">Bootstraptaste</a></p>
                </div>
            </div>  
        </div>
    </footer>

    <!-- Core JavaScript Files -->
    <script src="js/jquery-1.11.0.min.js"></script>    
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery.sticky.js"></script>
    <script src="js/jquery.easing.min.js"></script>    
    <script src="js/jquery.scrollTo.js"></script>
    <script src="js/jquery.appear.js"></script>
    <script src="js/stellar.js"></script>
    <script src="js/nivo-lightbox.min.js"></script>
    
    <script src="js/custom.js"></script>
    <script src="js/css3-animate-it.js"></script>
    <!--<script src="js/canvas.js" type="text/javascript" charset="utf-8"></script>-->




</body></html>